<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>let const map</title>
    <script src="../js/jquery-1.12.4.js"></script>
    <script>
    /*
   
    var 函数作用域 function f(){}
    let 在同一个作用域不可重复定义相同变量 块级作用域 {}
    JS 解析分为两个阶段
        1.预处理
        2.执行期

    箭头函数没有自己的this，this指向外围作用域(window)
    */

    $(function(){


        //函数作用域
        // function f(){
        //     var n = 4;
        //     if(true){
        //        var n = 5;
        //     }
        //     console.log(n);
        // }
        // f();  //n=5

        //块级作用域
        function f(){
        let n = 4;
        if(true){
            let n = 5;
        }
        console.log(n);
        }
        f();  //n=4

        //箭头函数
        var f1 = function(v){
            return v;
        }
        var f1$ = v=>v;//f1变量名字 = v参数 => 函数体
        
        //无参数情况
        var f3 = () => 'abc';
        var f3$ = function(){
            return 'abc';
        }

        //多参数情况
        var f4 = function(n1,n2){
            return n1 + n2;
        }
        var f4$ = (n1,n2) => n1+n2;

        //方法体多行
        var f5 = function(n1,n2){
            return n1 + n2;
        }
        var f5$ = (n1,n2) => {
            //....
        };


        //Map`${key}` 模板字符串
        var map = new Map();
        var result;
        map.set('name','hanley')
        map.set('age',20);
        map.set('gender','Man');
        for(let[key,value] of map){
            result += `<li>Key:${key},value:${value}</li>`
        }
        $('body ul').html(result);


        // console.log(myv);//undefined 
        // var myv = '12';

        // console.log(myv2);// error:Uncaught ReferenceError: myv2 is not defined
        // let myv2 = '12'; // 必须先声明后声明，不允许在同一个作用域中重复声明
        

        //数组元素是function,var仅作用于function，没有function就属于外层
        var arr= [];
        for(var i=0; i<5; i++){
            arr[i] = function(){
                console.log(i);
            }
        }
        arr[2]();//5

        //数组元素是function,let仅作用于for中
        var arr2= [];
        for(let i=0; i<5; i++){
            arr2[i] = function(){
                console.log(i);
            }
        }
        arr2[2]();//2


        //暂时性死区
        var n = '123';
        if(true){
            n = '345';
            //let n;//必须先声明，再赋值; -- 会报错
        }
        
        //y=2在前才可以，let必须是先声明后使用
        //let x=y,y=2;
        //console.log('y='+y);// -- 会报错


        /** 
         * const 常量，一旦声明无法更改 
         * 声明时必须初始化
         * */
        //const cst01 = '123';
        //cst01 = '456';//Uncaught TypeError: Assignment to constant variable.

        //声明时未初始化会报错
        //const aaa;//Uncaught SyntaxError: Missing initializer in const declaration

        //const 声明数组和对象时，可以修改所声明的 obj|arry 中的数据
        const obj = {};
        obj.name = 'Hanley';
        obj.age = 20;
        const mArry = [];
        mArry.push(1);
        mArry.push(2);
        //mArry = ['0'];//这里报错


        //预解析只是 解析 变量名,没有太明白？？？？？？
        var specStr = '123';
        function spec(){
            console.log(specStr);
            var specStr = '456';
        }
        spec();//undefined




    });
    </script>
</head>
<body>
    <ul></ul>
</body>
</html>